
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/css/layui.css">
    <link rel="stylesheet" href="/assets/css/view.css"/>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
</head>
<body class="layui-view-body">
<div class="layui-content">

    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-mid">用户名:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">邮箱:</div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="text" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">性别:</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <select name="sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                            <button class="layui-btn layui-btn-blue">查询</button>
                            <button class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <button  id="add"  class="layui-btn layui-btn-blue"><i class="layui-icon">&#xe654;</i>新增</button>

                    <table id="storeTable" lay-filter="storeTable"></table>

                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/assets/layui.all.js"></script>
<script src="/js/request.js"></script>
<script th:inline="javascript">
    var element = layui.element;
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    //form.render();
    var $ = layui.jquery;
    table.render({
        elem: '#storeTable',
        url:'/category/list',
        parseData: function(res){ //res 即为原始返回的数据
            return {
                "status": 0, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": 200, //解析数据长度
                "data": res.data //解析数据列表
            };
        },
        cols: [[ //标题栏
            {field: 'id', title: 'ID', width: 250}
            , {field: 'name', title: '分类名称', width: 220}
            , {field: 'parentId', title: '父类目ID', width: 250}
            , {field: 'sort', title: '排序值', width: 250,sort:true}
            ,{fixed: 'right', width:150, align:'right', toolbar: '#barDemo'}
        ]]

        , skin: 'line'//表格风格
        , title:"分类"
        , even: true
        , page: true //是否显示分页
        , limits: [7, 10]
        , limit: 7 //每页默认显示的数量
    });

    //展示已知数据



    //监听行工具事件
    table.on('tool(storeTable)', function(obj){
        var data = obj.data;
        console.log(form)

        if(obj.event === 'del'){
            layer.confirm('真的删除行么',async function(index){
                obj.del();
                const  result = await requests(`/category/del/${obj.data.id}`,"DELETE");
                if (result.success){
                    layer.msg("删除成功",{icon: 1,time:1000 });
                }
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            //表单回显
            $('#name').val(obj.data.name);
            $('#id').val(obj.data.id);
            $('#parentId').val(obj.data.parentId);
            $('#sort').val(obj.data.sort);

            layer.open({
                title:"添加类目",
                //调整弹框的大小
                area:['800px','500px'],
                shadeClose:true,//点击旁边地方自动关闭
                //动画
                anim:2,
                //弹出层的基本类型
                type: 1,
                //刚才定义的弹窗页面
                content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

            });
        }
    });

    $('#add').on("click",function(){

        $('#name').val("");
        $('#id').val("");
        $('#sort').val(1);
        $('#parentId').val("");
        layer.open({
            title:"添加类目",
            //调整弹框的大小
            area:['700px','400px'],
            shadeClose:true,//点击旁边地方自动关闭
            //动画
            anim:2,
            //弹出层的基本类型
            type: 1,
            //刚才定义的弹窗页面
            content: $('#form'), //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']

        });
    });

    //监听提交
    form.on('submit(formSubmit)',async function(data){

        const subData = data.field;
        //自定义验证规则
        if (subData.name.trim()===""){
            layer.msg("请完善表单",{icon: 2,time:1000 });
            return ;
        }

        const result = await requests("/category/save","POST",subData);
        console.log(result);
        if (result){
            layer.msg("提交成功",{icon: 1,time:1000 });
        }
    });


</script>
</body>

<div style="display: none; margin-top:20px" id="form" class="form">
    <form class="layui-form" lay-filter="storeForm">
        <div style="display: none" class="layui-form-item">
            <label class="layui-form-label">类目ID</label>
            <div class="layui-input-inline">
                <input type="text" id="id" name="id"  autocomplete="off" placeholder="id" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类目名称</label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" lay-verify="title" autocomplete="off" placeholder="请输入类目名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">父类目ID</label>
            <div class="layui-input-inline">
                <input type="text" name="parentId" id="parentId" placeholder="请输入父类目ID" lay-verify="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序值</label>
            <div class="layui-input-inline">
                <input type="number" id="sort" name="sort" lay-verify="title" autocomplete="off" placeholder="请输入排序值" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
</div>
</html>